<template>
    <div>
        <div class="e-h-400" ref="chart" :id="id"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    props: {
        id: '',
        data: []
    },
    mounted() {
        console.log('mountedID', this.id)
        var chartDom = document.getElementById(this.id);
        var myChart = echarts.init(chartDom);
        var option;

        //获取数据
        var seriesdata = []
        var yAxisdata = []
        this.data.forEach((item)=>{
            yAxisdata.push(item.brothername)
            seriesdata.push(item.amount)
        })

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: yAxisdata,
                // data: ['小哥1', '小哥2', '小哥3', '小哥4', '小哥5', '小哥6', '小哥7', '小哥8', '小哥9', '小哥10']
            },
            series: [
                {
                    name: '完成订单金额（元）',
                    type: 'bar',
                    data: seriesdata
                    // data: [100, 93, 91, 88, 78, 76, 70, 69, 58, 40]
                }
            ]
        };

        option && myChart.setOption(option);
    }
}
</script>

<style lang="scss" scoped>

</style>